<!doctype html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Filtering events</title>

	<script src="../../codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="../../codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title"
	      charset="utf-8">


	<style type="text/css" media="screen">
		html, body {
			margin: 0px;
			padding: 0px;
			height: 100%;
			overflow: hidden;
		}

		.filters_wrapper {
			line-height: 12px;
			font-size: 12px;
		}
		.filters_wrapper span {
			font-weight: bold;
			padding-right: 5px;
		}
		.filters_wrapper label {
			padding-right: 3px;
		}
	</style>

	<script type="text/javascript" charset="utf-8">
		function init() {
			scheduler.config.multi_day = true;
			scheduler.config.details_on_create = true;
			scheduler.config.xml_date = "%Y-%m-%d %H:%i";
			scheduler.config.first_hour = 10;
			scheduler.config.limit_time_select = true;

			scheduler.locale.labels.section_type = "Type";
			scheduler.xy.margin_top = 30;

			// default values for filters
			var filters = {
				appointment: true,
				task: true,
				training: true
			};

			var filter_inputs = document.getElementById("filters_wrapper").getElementsByTagName("input");
			for (var i=0; i<filter_inputs.length; i++) {
				var filter_input = filter_inputs[i];

				// set initial input value based on filters settings
				filter_input.checked = filters[filter_input.name];

				// attach event handler to update filters object and refresh view (so filters will be applied)
				filter_input.onchange = function() {
					filters[this.name] = !!this.checked;
					scheduler.updateView();
				}
			}

			// here we are using single function for all filters but we can have different logic for each view
			scheduler.filter_month = scheduler.filter_day = scheduler.filter_week = function(id, event) {
				// display event only if its type is set to true in filters obj
				// or it was not defined yet - for newly created event
				if (filters[event.type] || event.type==scheduler.undefined) {
					return true;
				}

				// default, do not display event
				return false;
			};

			var types = [
				{ key: "appointment", label: "Appointment" },
				{ key: "task", label: "Task" },
				{ key: "training", label: "Training" }
			];
			scheduler.config.lightbox.sections=[
				{name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
				{name:"type", height:23, type:"select", options: types, default_value: "appointment", map_to:"type" },
				{name:"time", height:72, type:"time", map_to:"auto"}
			];
			scheduler.init('scheduler_here', new Date(2009, 5, 30), "week");
			scheduler.parse([
				{ start_date: "2009-06-30 12:00", end_date: "2009-06-30 20:00", text:"Appointment A-48865", type: "appointment" },
				{ start_date: "2009-07-01 14:00", end_date: "2009-07-01 16:00", text:"Task T-44864", type: "task" },
				{ start_date: "2009-07-02 16:30", end_date: "2009-07-02 18:00", text:"Training T-46558", type: "training" },
				{ start_date: "2009-07-03 18:30", end_date: "2009-07-03 20:00", text:"Appointment A-45564", type: "appointment" }
			],"json");
		}
	</script>
</head>
<body onload="init();">
<div style='height:20px; padding:5px;'>
	<div class="filters_wrapper" id="filters_wrapper">
		<span>Display:</span>
		<label>
			<input type="checkbox" name="appointment" />
			Appointments
		</label>
		<label>
			<input type="checkbox" name="task" />
			Tasks
		</label>
		<label>
			<input type="checkbox" name="training" />
			Trainings
		</label>
	</div>
</div>
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
	<div class="dhx_cal_navline">
		<div class="dhx_cal_prev_button">&nbsp;</div>
		<div class="dhx_cal_next_button">&nbsp;</div>
		<div class="dhx_cal_today_button"></div>
		<div class="dhx_cal_date"></div>
		<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
		<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
		<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
	</div>
	<div class="dhx_cal_header">
	</div>
	<div class="dhx_cal_data">
	</div>
</div>
</body>